<template>
  <div class="home">
    <div class="topbar-wrapper"
         v-show="isEdit==true">
      <p>当前页面：首页</p>
    </div>
    <div class="content-wrapper">
      <el-row>
        <div class="handle_button"
             v-show="isEdit">
          <el-button class="el-icon-document"
                     type="primary"
                     size="small"
                     @click="savePage()">保存</el-button>
          <el-button class="el-icon-refresh"
                     type="primary"
                     size="small"
                     @click="returnlast()">还原本次操作</el-button>
          <el-button class="el-icon-refresh"
                     type="primary"
                     size="small"
                     @click="getDefaultModuleData()">还原默认布局</el-button>
          <el-button class="el-icon-plus"
                     type="primary"
                     size="small"
                     @click="addModule = true">添加窗口面板</el-button>
        </div>
        <grid-layout :layout.sync="layout"
                     :col-num="14"
                     :row-height="35"
                     :is-draggable="Boolean(isEdit)"
                     :is-resizable="Boolean(isEdit)"
                     :is-mirrored="Boolean(false)"
                     :vertical-compact="true"
                     :margin="[20, 20]"
                     :use-css-transforms="true">
          <grid-item class="item"
                     ref="item"
                     v-for="(item,index) in layout"
                     :key="index"
                     :x="Number(item.x)"
                     style="background-color:#fff"
                     :y="Number(item.y)"
                     :w="Number(item.w)"
                     :h="Number(item.h)"
                     :i="item.i"
                     @move="move">
            <i class="el-icon-close delete-right"
               @click="delMoudle(index,item)"
               v-show="isEdit"></i>
            <component :key="index"
                       :is="item.i"
                       :height="item.h"
                       :type="item.i"
                       @DynamicNews="getDynamicNews"></component>
          </grid-item>
        </grid-layout>
      </el-row>
    </div>
    <DynamicDialog :dialogVisible.sync="DynamicDialogVisible"
                   :DialogNewForm.sync="DynamicNewForm"></DynamicDialog>
    <el-dialog width="35%"
               title="添加模块"
               :visible.sync="addModule">
      <el-table ref="addModelTable"
                :data="gridData"
                :header-cell-style="{background:'#f5f5f5'}"
                style="width: 100%"
                height="400"
                align="center">
        <el-table-column width="55"
                         :render-header="renderHeader">
          <template slot-scope="scope">
            <el-checkbox v-model="scope.row.is_select"
                         @change="selectCpt(scope.row)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column property="moudle_name"
                         label="模块名称"
                         width="150"></el-table-column>
        <el-table-column property="moudle_type"
                         label="模块类型"
                         width="200"></el-table-column>
      </el-table>
      <div style="text-align:right;margin-top:20px;">
        <el-button @click="addModule = false">取消</el-button>
        <el-button type="primary"
                   @click="additem()">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { PageComPriviewApi, pageComCustomApi } from '@/services/SystemSetting';
import VueGridLayout from 'vue-grid-layout';
import ComponentTotal from '../../../layout/ComponentTotal.vue';
import ComponentProjectCount from '../../../layout/ComponentProjectCount.vue';
import ComponentDate from '../../../layout/ComponentDate';
import ComponentDongTai from '../../../layout/ComponentDongTai';
import ComponentgoujianCount from '../../../layout/ComponentgoujianCount';
import ComponentPersonCount from '../../../layout/ComponentPersonCount';
import ComponentType from '../../../layout/ComponentType';
import ComponentYewuCount from '../../../layout/ComponentYewuCount';
import ProjectListMap from '../../../layout/ProjectListMap';
import unitCountEcharts from '../../../layout/unitCountEcharts';
import projectComponentCount from '../../../layout/projectComponentCount';
import onKucunCount from '../../../layout/onKucunCount';
import processStateCount from '../../../layout/processStateCount';
import ComponentTotalNext from '../../../layout/ComponentTotalNext';

import car from '../../../layout/ComponentDigitalPanel';
import child_company from '../../../layout/ComponentDigitalPanel';
import menber from '../../../layout/ComponentDigitalPanel';
import project_count from '../../../layout/ComponentDigitalPanel';
import component_count from '../../../layout/ComponentDigitalPanel';
import projected from '../../../layout/ComponentDigitalPanel';
import projecting from '../../../layout/ComponentDigitalPanel';
import gps from '../../../layout/ComponentDigitalPanel';
import rfid from '../../../layout/ComponentDigitalPanel';
import working from '../../../layout/ComponentDigitalPanel';
import worked from '../../../layout/ComponentDigitalPanel';
import projected_design from '../../../layout/ComponentDigitalPanel';
import projecting_design from '../../../layout/ComponentDigitalPanel';
import point_count from '../../../layout/ComponentDigitalPanel';
import mouth_capacity from '../../../layout/ComponentDigitalPanel';
import projected_factory from '../../../layout/ComponentDigitalPanel';
import projecting_factory from '../../../layout/ComponentDigitalPanel';

// 下面是新增的组件(11个)
import AnnualCumulative from '../../../layout/newComponent/AnnualCumulative';
import CattleManage from '../../../layout/newComponent/CattleManage';
import CumulativeContract from '../../../layout/newComponent/CumulativeContract';
import QuantityWork from '../../../layout/newComponent/QuantityWork';
import TotalNewSignatures from '../../../layout/newComponent/TotalNewSignatures';
import ArchitecturalTypes from '../../../layout/newComponent/ArchitecturalTypes';
import CapacityStatistics from '../../../layout/newComponent/CapacityStatistics';
import ContractItemDistribution from '../../../layout/newComponent/ContractItemDistribution';
import NewlySignedProjects from '../../../layout/newComponent/NewlySignedProjects';
import QuantityStatistics from '../../../layout/newComponent/QuantityStatistics';
import TotalContractAmount from '../../../layout/newComponent/TotalContractAmount';
import DynamicDialog from './components/DynamicDialog.vue';

export default {
  components: {
    DynamicDialog,
    GridLayout: VueGridLayout.GridLayout,
    GridItem: VueGridLayout.GridItem,
    car,
    child_company,
    menber,
    project_count,
    component_count,
    projected,
    projecting,
    gps,
    rfid,
    working,
    worked,
    projected_design,
    projecting_design,
    point_count,
    mouth_capacity,
    projected_factory,
    projecting_factory,
    processStateCount,
    onKucunCount,
    ProjectListMap,
    projectComponentCount,
    unitCountEcharts,
    ComponentProjectCount,
    ComponentDongTai,
    ComponentDate,
    ComponentgoujianCount,
    ComponentPersonCount,
    ComponentType,
    ComponentYewuCount,
    ComponentTotal,
    ComponentTotalNext,
    AnnualCumulative,
    CattleManage,
    CumulativeContract,
    QuantityWork,
    TotalNewSignatures,
    ArchitecturalTypes,
    CapacityStatistics,
    ContractItemDistribution,
    NewlySignedProjects,
    QuantityStatistics,
    TotalContractAmount
  },
  data () {
    return {
      layout: [],
      show: false,
      addModule: false,
      projectVisible: false,
      gridData: [],
      lastLayout: this.layout,
      tableData: [],
      isEdit: this.$route.query.isEdit,
      isIndeterminate: true,
      selectData: [],
      selectAllData: [],
      isSelectAll: true,
      requestParam: {
        page: 1,
        instance_type: this.$route.query.instance_type,
        rela_id: this.$route.query.unitId,
        page_tmp_id: 1
      },
      DynamicDialogVisible: false,
      DynamicNewForm: {}
    }
  },
  methods: {
    renderHeader (h) {
      return (
        <el-checkbox
          indeterminate={this.isIndeterminate}
          onChange={this.selectAll}
          v-model="value"
        ></el-checkbox>
      )
    },
    selectCpt (data) {
      if (this.selectData.length == 0) {
        this.selectData.push(data)
      } else {
        var flag = true
        for (var i = 0; i < this.selectData.length; i++) {
          if (this.selectData[i].page_moudle_id == data.page_moudle_id) {
            this.selectData[i].is_select = data.is_select
            flag = false

          }
        }
        if (flag) {
          this.selectData.push(data)
        }
      }
    },
    selectAll (data) {
      this.selectData = []
      this.isSelectAll = data
      for (var i = 0; i < this.gridData.length; i++) {
        this.gridData[i].is_select = data
      }
      if (data == true) {
        for (var i = 0; i < this.gridData.length; i++) {
          var obj = this.gridData[i]
          var num = obj.module_name
          var isExist = false
          for (var j = 0; j < this.layout.length; j++) {
            var aj = this.layout[j]
            var n = aj.module_name
            if (n == num) {
              isExist = true
              break;
            }
          }
          if (!isExist) {
            this.selectData.push(obj)
          }
        }
      } else {
        this.selectData = this.gridData
      }
    },
    // 开始移动
    move () {
      sessionStorage.setItem('newdata', JSON.stringify(this.layout))
    },
    // 保存
    savePage () {
      PageComPriviewApi.savePageModule({
        data: {
          instance_type: this.$route.query.instance_type,
          rela_id: this.$route.query.unitId,
          page_tmp_id: 1,
          instance_moudle: JSON.stringify(this.layout)
        }
      }).then(res => {
        if (res.code === 0) {
          this.$message({
            message: '保存成功',
            type: 'success'
          })
          this.$router.go(-1)
        } else {
          this.$message({
            message: res.msg,
            type: 'error'
          })
        }
      })
    },
    // 还原本次操作
    returnlast () {
      this.layout = JSON.parse(sessionStorage.getItem('newdata'))
    },
    // 还原默认布局
    returndefault () {
      axios
        .get('admin/pageMade/defaultLayout', {
          params: {
            instance_type: this.$route.query.instance_type,
            rela_id: this.$route.query.unitId,
            page_tmp_id: 1
          },
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
          }
        })
        .then(
          res => {
            if (res.data) {
              this.layout = res.data
              this.getAddMuduleList()
            }
          },
          err => {
            console.log(err)
          }
        )
    },
    // 删除模块
    delMoudle (index, item) {
      this.layout.splice(index, 1)
      for (var j = 0; j < this.gridData.length; j++) {
        if (this.gridData[j].page_moudle_id == item.page_moudle_id) {
          this.gridData[j].is_select = false
        }
      }
      // console.log(this.layout)
    },
    // 获取模块列表
    getModuleList () {
      PageComPriviewApi.getPageModuleData({
        params: this.requestParam
      }).then(res => {
        if (res.data.data != '') {
          this.layout = res.data
          // this.gridData = res.data.data
        }
      })
    },
    // 获取所有模块列表
    getAddMuduleList () {
      pageComCustomApi
        .getPageModuleList({
          params: {
            instance_type: this.$route.query.instance_type,
            rela_id: this.$route.query.unitId,
            page_tmp_id: 1,
            page_size: 1000
          }
        })
        .then(res => {
          if (res.data) {
            this.gridData = res.data.data
          }
        })
    },
    // 还原默认模板
    getDefaultModuleData () {
      PageComPriviewApi.getDefaultModule({
        params: this.requestParam
      }).then(res => {
        if (res.data != '') {
          this.layout = res.data
          this.gridData = res.data
        }
      })
    },
    additem () {
      this.addModule = false
      if (this.isSelectAll == false) {
        this.layout = []
      } else if (this.layout.length == 0) {
        for (var i = 0; i < this.selectData.length; i++) {
          if (this.selectData[i].is_select == true) {
            this.layout.push(this.selectData[i])
          }
        }
      } else {
        for (var i = 0; i < this.selectData.length; i++) {
          for (var j = 0; j < this.layout.length; j++) {
            if (this.selectData[i].is_select == true && this.selectData[i].page_moudle_id == this.layout[j].page_moudle_id) {
              this.selectData.splice(i, 1)
            } else if (this.selectData[i].is_select == false && this.selectData[i].page_moudle_id == this.layout[j].page_moudle_id) {
              this.layout.splice(j, 1)
            } else {
              this.layout.push(this.selectData[i])
            }
          }
        }
      }
      this.isSelectAll = true
    },
    getDynamicNews (list, data) {
      var newForm = {}
      this.DynamicDialogVisible = true
      newForm.title = list.title
      newForm.name = list.username
      newForm.classify = data.name
      newForm.time = list.create_time
      newForm.content = list.content
      this.DynamicNewForm = newForm
    }
  },
  mounted () { },
  created () {
    this.getModuleList()
    this.getAddMuduleList()
  }
}
</script>
<style>
/* ::-webkit-scrollbar {
              display: none;
              width: 0px;
              height: 0px;
          } */
</style>

<style lang="scss" scoped>
.home {
  position: relative;
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  overflow-x: hidden;
}

.project_button {
  position: fixed;
  top: 20%;
  right: 0;
  z-index: 100000;
}

.topbar-wrapper {
  position: relative;
  left: 0;
  top: 0;
  width: 100%;
  height: 54px;
  line-height: 54px;
  padding: 0 24px 0 0;
  background-color: #fff;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05), 0 0 6px 0 rgba(0, 0, 0, 0);
  transition: all 0.3s ease-in-out;
  z-index: 12;

  .titles {
    padding-left: 60px;
    background: url("/static/img/logo.png") no-repeat 1% 50%;
    background-size: 40px 50px;
    margin-left: 20px;
    font-size: 18px;
  }
  .edit {
    /* margin:0 20px 0px 60px; */
    .edit-info {
      width: 100px;
      text-align: center;

      i {
        color: #999999;
        font-size: 25px;
        line-height: 68px;
        width: 40px;
      }
    }
  }
}

.content-wrapper {
  background: #efeff4 !important;

  .handle_button {
    height: 32px;
    /* width: 100%; */
    margin: 0px 20px;
  }

  .delete-right {
    position: absolute;
    margin: 5px;
    right: 5px;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
  }

  .delete-right:hover {
    background: #999;
    border-radius: 4px;
  }

  .item {
    .left_num {
      font-size: 40px;
      color: #fff;
      display: block;
      margin-left: 20px;
      margin-top: 20px;
      font-weight: bold;
    }

    .left_title {
      font-size: 16px;
      color: #fff;
      font-weight: bold;
      display: block;
      margin-left: 20px;
      margin-top: 12px;
    }

    .left_icon {
      display: block;
      width: 58px;
      height: 65px;
      position: absolute;
      right: 20px;
      top: 20px;
    }

    .left_bgimg {
      display: block;
      width: 100%;
      height: 95px;
      background-repeat: no-repeat;
      position: absolute;
      bottom: 0;
      background-size: 100%;
    }

    .smallitem {
      width: 279px;
      height: 105px;
      background: #fff;
      float: left;
      margin-right: 20px;
      margin-bottom: 20px;
      position: relative;
      border-radius: 4px;

      .small_num {
        color: #fff;
        font-size: 32px;
        font-weight: bold;
        position: absolute;
        right: 66px;
        top: 25px;
      }

      .small_title {
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        position: absolute;
        right: 58px;
        bottom: 26px;
      }

      .small_icon {
        width: 60px;
        height: 60px;
        position: absolute;
        left: 20px;
        top: 20px;
        display: block;
      }

      .small_img {
        display: block;
        width: 100px;
        height: 103px;
        position: absolute;
        right: 0px;
        top: 0px;
      }
    }

    .smallitem:nth-of-type(3n) {
      margin-right: 0px;
    }

    .smallitem:nth-of-type(6) .small_num {
      right: 58px;
    }

    .smallitem:nth-of-type(3n) .small_title {
      right: 70px;
    }

    .news_head {
      height: 64px;
      padding: 0 20px;
      border-bottom: 1px solid #ccc;

      .news_head_title {
        font-size: 16px;
        display: block;
        height: 64px;
        line-height: 64px;
        float: left;
        color: #1441b3;
      }

      .news_head_link {
        font-size: 16px;
        display: block;
        height: 64px;
        line-height: 64px;
        float: right;
        color: #1890ff;
      }
    }

    .news_content {
      padding: 10px 20px;

      .news_detail {
        overflow: hidden;

        .detail_left {
          float: left;
          font-size: 14px;
          height: 36px;
          line-height: 36px;
          color: #4d4d4d;
        }

        .detail_right {
          float: right;
          font-size: 14px;
          height: 36px;
          line-height: 36px;
          color: #999999;
        }
      }
    }

    .data_pie {
      .pie_title {
        padding: 0 20px;
        font-size: 16px;
        line-height: 64px;
        color: #1441b3;
        border-bottom: 1px solid #e6e6e6;
      }
    }

    .data_bar {
      .bar_title {
        padding: 0 20px;
        font-size: 16px;
        line-height: 64px;
        color: #1441b3;
        border-bottom: 1px solid #e6e6e6;
      }
    }

    .add_line {
      .add_line_title {
        padding: 0 20px;
        font-size: 16px;
        line-height: 44px;
        color: #1441b3;
        border-bottom: 1px solid #e6e6e6;
      }
    }

    .add_bar {
      .add_bar_title {
        padding: 0 20px;
        font-size: 16px;
        line-height: 44px;
        color: #1441b3;
        border-bottom: 1px solid #e6e6e6;
      }
    }

    .add_table {
      .add_table_title {
        padding: 0 20px;
        font-size: 16px;
        line-height: 64px;
        color: #1441b3;
        border-bottom: 1px solid #e6e6e6;
      }
    }

    .add_rain {
      .add_rain_title {
        padding: 0 20px;
        font-size: 16px;
        line-height: 64px;
        color: #1441b3;
        border-bottom: 1px solid #e6e6e6;
      }
    }

    .deleteItem {
      display: block;
      width: 16px;
      height: 16px;
      position: absolute;
      top: 0;
      right: 0px;
      color: #aaa;
      cursor: pointer;
      z-index: 10;
      text-align: center;
    }
  }
}
</style>
